<template>
    <div>
        <PopForm ref="FormRef" @onClose="onClose" @nextChange="nextChange" @changeTab="changeTab"
            @submitData="changePassword" :loading="state.loading">
        </PopForm>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, reactive, ref, nextTick } from 'vue';
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from '@/netBase/NetPacket';
import { useI18n } from 'vue-i18n';
import { handleOpenLink, getCustomerServiceLink} from '@/utils/publicMethods'
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';
import PopForm from '@/components/PopForm.vue';
import { User } from '@/store/user';
import { verifyCaptcha, verifyEmail, verifyMobile, verifyPassword } from '@/utils/validateTools';
import { showNotify } from '@nutui/nutui';
import eventBus from "@/lolo/eventBus"

const FormRef = ref()

const { t } = useI18n();
const page = Page(pinia);
const { settings } = storeToRefs(page);
const state: any = reactive({
    checkPhoneOremail: true,
    formData: {
        step:1,
        active: 1,   // 当前是手机tab  还是email
        phoneStep: 1,  //1表示点击下一步需要校验手机或者邮箱是否已经绑定，验证码是否正确；operate_type=2表示立即修改密码
        emailStep: 1,
        loading: false,
        buttonText: t('home_page_next'),
        phoneButtonText: t('home_page_next'),
        emailbuttonText: t('home_page_next'),
        title: t('home_page_retrievePassword'),
        showLabel: false,
        forgetPassword: true,
        tabList: [
            { name: t('home_page_phoneRecovery'), value: 1 },
            { name: t('home_page_emailRetrieval'), value: 2 },
            { name: t('home_page_customerServiceRetrieval'), value: 3, isLink: true }
        ],
        formParams: {
            operate_type: 2, //1表示点击下一步需要校验手机或者邮箱是否已经绑定，验证码是否正确；operate_type=2表示立即修改密码
            modify_type: 1, //1表示常规修改密码，modify_type=2表示通过手机修改密码，modify_type=3表示通过邮箱修改密码
            phoneCode: "",
            emailCode: "",
            mobile: "",
            email: '',
            old_password: '',
            new_password: "",
            new_password_confirm: "",
            codeValue: '84',
        },
        rules: {
            mobile: [
                {
                    // required: !0,
                    // trigger: "change",
                    validator: (value: string) => {
                        console.log(value);
                        if (!value) {
                            return Promise.reject(t('home_page_enterPhoneNumber'))
                        } else
                            if (verifyMobile(state.formData.formParams.codeValue, value)) {
                                state.formData.list.phoneCode.disabled = false
                                return Promise.resolve()
                            } else {
                                state.formData.list.phoneCode.disabled = true
                                return Promise.reject(t('home_page_phoneNumberFormatIncorrect'))
                            }

                    },
                },
            ],
            verify_code: [
                {
                    // required: !0,
                    // trigger: "blur",
                    validator: (value: string) => {
                        if (!value) {
                            return Promise.reject(t('home_page_enterVerificationCode'))
                        } else
                            if (verifyCaptcha(value)) {
                                return Promise.resolve()
                            } else {
                                return Promise.reject(t('home_page_verificationCodeFormatIncorrect'))
                            }
                    },
                },
            ],
            email: [
                {
                    // required: !0,
                    // trigger: "change",
                    validator: (value: string) => {
                        if (!value) {
                            return Promise.reject(t('home_page_enterEmail'))
                        } else
                            if (verifyEmail(state.formData.formParams.email)) {
                                state.formData.list.emailCode.disabled = false
                                return Promise.resolve()
                            } else {
                                state.formData.list.emailCode.disabled = true
                                return Promise.reject(t('home_page_emailIncorrect'))
                            }
                    },

                },
            ],
            old_password: [
                {
                    // required: !0,
                    // trigger: "blur",
                    validator: (value: string) => {
                        if (!value) {
                            return Promise.reject(t('home_page_enterPassword'))
                        } else
                            if (verifyPassword(value)) {
                                return Promise.resolve()
                            } else {
                                return Promise.reject(t('home_page_passwordFormatIncorrect'))
                            }
                    },

                },
            ],
            new_password: [
                {
                    // required: !0,
                    // trigger: "blur",
                    validator: (value: string) => {
                        if (!value) {
                            return Promise.reject(t('home_page_enterNewPassword'))
                        } else
                            if (verifyPassword(value)) {
                                return Promise.resolve()
                            } else {
                                return Promise.reject(t('home_page_passwordFormatIncorrect'))
                            }
                    },
                },
            ],
            new_password_confirm: [
                {
                    // required: !0,
                    // trigger: "blur",
                    validator: (value: any) => {
                        if (!value) {
                            return Promise.reject(t('home_page_enterAgainNewPassword'))
                        } else
                            if (value != state.formData.formParams.new_password) {
                                return Promise.reject(t('home_page_passwordsInconsistent'))
                            } else {
                                return Promise.resolve()
                            }
                    },
                },
            ],
            emailCode: [
                {
                    // required: !0,
                    // trigger: "blur",
                    validator: (value: string) => {
                        if (!value) {
                            return Promise.reject(t('home_page_enterSmsCode'))
                        } else
                            if (verifyCaptcha(value)) {
                                return Promise.resolve()
                            } else {
                                return Promise.reject(t('home_page_smsCodeFormatIncorrect'))
                            }
                    },
                },
            ],
        },
        list: {
            mobile: {
                name: "mobile",
                type: "text",
                placeholder: t('home_page_enterPhoneNumber'),
                label: t('home_page_phone'),
                slot: !1,
                leftIcon: 'signicon10',
                changeRightIcon: !1,
                show: true,
                isMobile: true,
                subtitle: t('home_page_phone_number')
            },

            email: {
                name: "email",
                type: "text",
                placeholder: t('home_page_enterEmail'),
                label: t('home_page_email'),
                slot: !1,
                leftIcon: "signicon05",
                changeRightIcon: !1,
                show: false,
                subtitle: t('home_page_email')
            },
            old_password: {
                name: "old_password",
                type: "password",
                placeholder: t('home_page_enterOldPassword'),
                label: t('home_page_oldPassword'),
                slot: !0,
                leftIcon: "signicon02",
                changeRightIcon: "wallrticontongy03",
                show: false,
                subtitle: t('home_page_oldPassword')
            },
            new_password: {
                name: "new_password",
                type: "password",
                placeholder: t('home_page_enterNewPassword'),
                label: t('home_page_newPassword'),
                slot: !0,
                leftIcon: "signicon02",
                changeRightIcon: "wallrticontongy03",
                show: false,
                subtitle: t('home_page_newPassword')
            },
            new_password_confirm: {
                name: "new_password_confirm",
                type: "password",
                placeholder: t('home_page_enterAgainNewPassword'),
                label: t('home_page_newPassword'),
                slot: !0,
                leftIcon: "signicon02",
                changeRightIcon: "wallrticontongy03",
                show: false,
                subtitle: t('input_label_confirm_password')
            },
            phoneCode: {
                name: "phoneCode",
                type: "code",
                placeholder: t('home_page_smsCode'),
                label: t('home_page_smsCode'),
                slot: !0,
                leftIcon: "signicon03",
                changeRightIcon: !1,
                show: true,
                disabled: true,
                loading: false,
                timeText: t('get_verification_code'),
                timer: null,
                btnDisabled: false,
                subtitle: t('input_label_code')
            },
            emailCode: {
                name: "emailCode",
                type: "code",
                placeholder: t('home_page_enterVerificationCode'),
                label: t('home_page_verificationCode'),
                slot: !0,
                leftIcon: "signicon03",
                changeRightIcon: !1,
                show: false,
                disabled: true,
                loading: false,
                timeText: t('get_verification_code'),
                timer: null,
                btnDisabled: false,
                subtitle: t('input_label_code')
            },
        },
    },

})
const onClose = async () => {
    await User(pinia).setForget(false)
};

const resetInputHide = () => {
    for (const key in state.formData.list) {
        state.formData.list[key].show = false
    }
}
const changeTab = (tabVal: number) => {
    // state.formData.step = 1
    state.formData.buttonText = t('home_page_next')
    if (tabVal == 1) {
        state.formData.active = tabVal;
        resetInputHide()
        if (state.formData.phoneButtonText != t('home_page_next')) {
            state.formData.list.new_password.show = true
            state.formData.list.new_password_confirm.show = true
        } else {
            state.formData.list.mobile.show = true
            state.formData.list.phoneCode.show = true
            state.formData.list.phoneCode.type = 'code'
        }
        state.formData.buttonText = state.formData.phoneButtonText
    }
    if (tabVal == 2) {
        state.formData.active = tabVal;
        resetInputHide()
        if (state.formData.emailbuttonText != t('home_page_next')) {
            state.formData.list.new_password.show = true
            state.formData.list.new_password_confirm.show = true
        } else {
            state.formData.list.email.show = true
            state.formData.list.emailCode.show = true
            state.formData.list.emailCode.type = 'code'
        }

        state.formData.buttonText = state.formData.emailbuttonText
    }
    if (tabVal == 3) {
        let telegramUrl = getCustomerServiceLink(settings.value.service_list);    
        handleOpenLink(telegramUrl)
        return
    }
    // state.step = 1;
};
const nextChange = (formData: any) => {
    if (state.formData.active == 1) {
        changePassword(formData, state.formData.phoneStep)
    }
    if (state.formData.active == 2) {
        changePassword(formData, state.formData.emailStep)
    }
}

const changePassword = (params: any, type: number) => {
    let req = NetPacket.req_reset_account_password();
    // 点击下一步验证手机或邮箱是否绑定
    if (type == 1) {
        req.operate_type = 1
        state.checkPhoneOremail = true
    } else {
        req.operate_type = 2
    }
    if (state.formData.active == 1) {
        req.username = params.codeValue + params.mobile
        req.captcha = params.phoneCode
        req.modify_type = 1
    }
    if (state.formData.active == 2) {
        req.username = params.email
        req.captcha = params.emailCode
        req.modify_type = 2
    }

    req.mobile_or_email = ''

    // req.username = req.mobile_or_email
    req.old_password = params.old_password
    req.new_password = params.new_password
    req.new_password_confirm = params.new_password_confirm

    PKwebsocket.instance.send(req, false, {
        callbackName: 'msg_notify_reset_account_password',
        callback: handleChangePassword
    })
    state.loading = true
    setTimeout(() => {
        state.loading = false
    }, 1000)
};

// 返回修改密码是否成功或验证手机或邮箱是否绑定
const handleChangePassword = async (res: any) => {
    state.loading = false
    if (state.checkPhoneOremail) {
        if (res.code == 1) {
            resetInputHide()

            state.formData.active == 1 && (state.formData.phoneStep = 2, state.formData.buttonText = state.formData.phoneButtonText = t('btn_label_submit'))
            state.formData.active == 2 && (state.formData.emailStep = 2, state.formData.buttonText = state.formData.emailbuttonText = t('btn_label_submit'))
            // state.formData.step = 2
            state.formData.list.new_password.show = true
            state.formData.list.new_password_confirm.show = true
            state.checkPhoneOremail = false
        }
    } else {
        if (res.code == 1) {
            showNotify.success(t(res.message))
            setTimeout(() => {
                eventBus.emit('msg_notify_login_result', { hideTip: true })
            }, 1000);


        }
    }
}

onMounted(() => {
    console.log(User(pinia).isForget, "User(pinia).isForget>>>>>>>>>")
    nextTick(() => {
        FormRef.value && FormRef.value.openDialog(state.formData, 3);
    })
})

</script>

<style lang='less' scoped></style>